<template>
	<view>
		<view class="box">
			
			
			<view class="wu" v-if="car_lists.length==0">
				<image src="../../../static/wu.png" style="width: 182px; height: 150px; " mode=""></image>
				<p>暂无数据</p>
			</view>

			<view class="kks"  v-for="(time,index) in car_lists">
				<view class="jjs" >
					<view>
						<view>
							<text class="d">{{time.name}}-{{time.car_plate}}</text>
						</view>
						<view>
							<text class="d" >{{time.mobile}}</text>
						</view>
					</view>
					<view>
						<view>
							<text  class="a" @click="edit(time)">编辑</text>
							<text class="b" @click="car_del(time.id)">删除</text>
						</view>
						<view>
							<text></text>
						</view>
					</view>
				</view>
			</view>
			<button @click="add()" >增加车辆</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				car_lists:[]
			}
		},
		onShow()
		{
			this.bank_lists();
		},
		methods: {
			
			bank_del(x)
			{
					uni.showModal({
					    title: '温馨提示',  //提示标题
					    content: '确认删除',  //提示内容
					    showCancel: true, //是否显示取消按钮
					    success:  (res)=> {
					        if (res.confirm) {  
								let data = {
									id:x
								}
								this.$rqt.bank_del(data).then(res => {
									console.log(res);
									uni.showToast({
										title: res.msg,
										icon: "success",
										duration: 850
									});
									this.bank_lists('');
								})
					        } else if (res.cancel) {  
					        }
					    }
					})
				
				

			},
			edit(x)
			{
				let carInfo = JSON.stringify(x);
				uni.navigateTo({
					url: "/pages/my/vehicle-list/edit-vehicle?data=" + carInfo
				});
			},
			add()
			{
				uni.navigateTo({
					url: "/pages/my/vehicle-list/add-vehicle"
				});
			},
			bank_lists()
			{
				let data = {}
				this.$rqt.userCarList(data).then(res => {
					this.car_lists = res.data?.data || [];
				})
			},
			car_del(x){
				uni.showModal({
				    title: '温馨提示',   
				    content: '确认删除',   
				    showCancel: true,  
				    success:  (res)=> {
				        if (res.confirm) {  
							let data = {
								id:x
							}
							this.$rqt.userCarDelete(data).then(res => {
								
								uni.showToast({
									title: res.msg,
									icon: "success",
									duration: 500
								});
								this.bank_lists();
							})
				        } else if (res.cancel) {  
				        }
				    }
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style scoped>
	.wu{
		width: 100%;
		text-align: center;
		padding-top: 60px;
		color: #999999;
		font-size: 18px;
		line-height: 40px;
		margin-bottom: 100px;
	}
	.box>button{
		color: #fff;
		font-size: 18px;
		width: 90%;
		margin: 0 auto;
		height: 50px;
		font-weight: 600;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204,204,204,0.5);
		border-radius: 25px;
		margin-top: 20px;
	}
	.a {
		margin-left: 60px;
		font-size: 18px;
		color: #1890FF;
		font-weight: 400;
		float: right;
	}

	.b {
		margin-left: 20px;
		font-size: 18px;
		font-weight: 400;
		color: #FF0000;
	}

	.d {
		font-size: 18px;
		font-weight: 500;
	}

	.kks {
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
		width: 95%;
		height: 104px;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		overflow: hidden;
		background: #FFFFFF;
	}

	.jjs {
		width: 95%;
		margin: 0 auto;
	}

	.jjs>view {
		width: 50%;
		float: left;

	}

	.jjs>view>view {
		display: flex;
		align-items: center;
		line-height: 50px;
		text-align: right;
	}

	.jjs>view>view>image {
		width: 28px;
		height: 21px;
		margin-right: 10px;
	}

	.box {
		width: 100%;
		padding-bottom: 20px;
	}

	.shou {
		width: 100%;
		height: 60px;
		background: #1890FF;
		display: flex;
		align-items: center;
	}

	.shou-box {
		width: 355px;
		margin: 0 auto;
		height: 32px;
		background: #FAFAFA;
		border-radius: 40px;
		display: flex;
		align-items: center;
	}

	.shou-box>image {
		width: 15px;
		height: 15px;
		margin-left: 10px;
		margin-right: 10px;
	}
</style>
